<template>
  <div class="phone">
    <div class="bg_phone">
      <el-container>
        <el-header>
          <span class="icon"
            ><el-icon><close-bold /></el-icon
          ></span>
          <h2 class="title">{{ formInfo.title }}</h2>
        </el-header>
        <el-main>
          <div class="content_box">
            <div class="time">
              {{ tiems }}
            </div>

            <div class="inp_box">
              首拆获￥<span v-if="formInfo.first_type == 1">{{ formInfo.first_value[0] }}元</span>
              <span v-if="formInfo.first_type == 2">{{ formInfo.first_value[0] }}元 - {{ formInfo.first_value[1] }}元</span>
              <span v-if="formInfo.first_type == 3">{{ (formInfo.first_value[0] * formInfo.red_envelope_money) / 100 }}元 - {{ (formInfo.first_value[1] * formInfo.red_envelope_money) / 100 }}元</span>
            </div>
            <div class="inp_box_two">
              <span>还有{{ money?.toFixed(2) }}元红包正在路上~</span>
            </div>
            <div class="inp_box_therr">
              <span>继续召唤{{ formInfo.help_num }}位好友拆红包</span><br />
              <span>拆完后即可收入囊中</span>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref, computed } from 'vue'
  const props = defineProps(['formInfo', 'tiems'])
  console.log(props.tiems)

  const percentage = ref([])
  const money = computed(() => {
    if (props.formInfo.first_type == 1) {
      return props.formInfo.red_envelope_money - props.formInfo.first_value[0]
    } else if (props.formInfo.first_type == 2) {
      return props.formInfo.red_envelope_money - props.formInfo.first_value[1]
    } else if (props.formInfo.first_type == 3) {
      return (props.formInfo.red_envelope_money * props.formInfo.first_value[1]) / 100
    }
  })
</script>

<style lang="scss" scoped>
  :deep .el-main {
    --el-main-padding: 0px;
  }
  .phone {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    .bg_phone {
      width: 330px;
      min-height: 630px;
      box-sizing: border-box;
      padding: 16px 11px 16px;
      border-radius: 30px;
      border: 1px solid #d2d8db;
      overflow: hidden;
      justify-content: center;
      background-color: #f1f7f9;
      .el-container {
        width: 100%;
        font-size: 12px;
        color: #000;
        .el-header {
          display: flex;
          width: 100%;

          height: 29px;
          padding: 10px 0 0 8px;
          text-align: center;
          .icon {
          }
          .title {
            flex: 1;
            padding-right: 25px;
            text-align: center;
            color: #000;
          }
        }
      }
      .content_box {
        position: relative;
        height: 560px;
        background-image: url('@/assets/chatDetails/fission_bg.png');
        // background: url();
        background-size: cover;
        .time {
          position: absolute;
          color: #ffffff;
          font-size: 18px;
          top: 129px;
          left: 80px;
        }
        .inp_box {
          position: absolute;
          top: 264px;
          left: 77px;
          line-height: 24px;
          text-align: center;
          color: #ff3e4a;
          border-radius: 12px;
          font-size: 16px;
        }
        .inp_box_two {
          position: absolute;
          top: 286px;
          left: 57px;
          line-height: 24px;
          text-align: center;
          color: #ff3e4a;
          border-radius: 12px;
          font-size: 16px;
        }
        .inp_box_therr {
          position: absolute;
          top: 325px;
          left: 68px;
          line-height: 24px;
          text-align: center;
          color: #ff3e4a;
          border-radius: 12px;
          font-size: 16px;
        }
      }
    }
  }
</style>
